<template>
  <el-input
      v-model="amount"
      placeholder="请输入金额" clearable
      :formatter="amountInputFormatter"
      :parser="amountInputParser"
  />
</template>

<script lang="ts" setup>
import { defineModel, PropType } from 'vue'

const amount = defineModel({
  required: true,
  type: [String, Number] as PropType<string | number>
})

/**
 * 金钱输入格式化
 * @param value 值
 */
const amountInputFormatter = (value: string) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

/**
 * 金钱输入解析
 * @param value 值
 */
const amountInputParser = (value: string) => value.replace(/￥\s?|(,*)/g, '')
</script>
